<template>
	<div class="headerContainer">
		<div class="menu">
			<el-menu
				:default-active="this.$route.path"
				router
				class="el-menu-demo"
				mode="horizontal"
				:ellipsis="false"
				@select="handleSelect"
				active-text-color="transpa"
			>
				<img
					src="https://rs.dance365.com/logo@3xrenew3.png"
					style="
						height: 30px;
						width: 128px;
						padding-top: 15px;
						margin-left: -250px;
						padding-right: 30px;
					"
					alt=""
					class="logo"
				/>
				<el-menu-item
					:index="item.name"
					v-for="(item, index) in navList"
					:key="index"
					>{{ item.navItem }}</el-menu-item
				>
				<div style="margin-left: 275px"></div>
				<el-menu-item
					:index="item.name"
					v-for="(item, index) in navRight"
					:key="index"
					>{{ item.navItem }}</el-menu-item
				>
			</el-menu>
		</div>
	</div>
</template>

<script lang="ts">
import Dialogtree from '../diologtree/dialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
	data() {
		return {
			navList: [
				{ name: '/home', navItem: '资源' },
				{ name: '/course', navItem: '课程' },
				{ name: '/practive', navItem: '练习室' },
				{ name: '/home/information', navItem: '交流' },
				{ name: '/center', navItem: '我的' },
			],
			navRight: [
				{ navItem: '下载APP' },
				{ navItem: '发布' },
				{ name: '/login',navItem: '登陆' },
			],
		}
	},
	components: {
		Dialogtree,
	},

	methods: {
		handleSelect(key, keyPath) {},
	},
}
</script>

<style>
.headerContainer {
	width: 100%;
	height: 60px;
	background-color: #fff;
	padding-left: auto;
}
.logo {
	margin-left: 300px;
}
.menu {
	/* width: 1200px; */
	/* margin: 0 auto; */
}
>>> .el-menu-demo {
	/* display: block; */
	/* margin: 0 auto; */
}
</style>
